<template>
  <page-header-wrapper>
    <a-card :border="false">
      <div class="flex" style="font-size:16px;margin-bottom:10px;">
        <div style="width:100px;text-align:right;margin-right:20px;">
          注册地址：
        </div>
        <div class="flenx-w-1">
          <a href="https://www.jushuitan.com/" target="_blank">https://www.jushuitan.com/</a>
        </div>
      </div>

      <div class="flex-y-center" style="margin-bottom: 20px; font-size: 16px">
        <div style="width:100px;text-align:right;margin-right:20px;">是否已授权：</div>
        <div>
          <div v-if="isopen" class="flex-y-center">
            <a-tag color="#87d068"> 已授权 </a-tag>
          </div>
          <div v-else class="flex-y-center">
            <a-button @click="clickLink" :loading="btLoading"  type="link"> 去授权 </a-button>
            <div v-if="expires_time" style="color: #8c8c8c; font-size: 14px">
              过期时间：{{ $moment(expires_time * 1000).format('YYYY-MM-DD') }}
            </div>
          </div>
        </div>
      </div>
      
      <div style="width: 600px">
        <a-form-model
          ref="ruleForm"
          :model="formData"
          :rules="rules"
          layout="vertical"
          :wrapperCol="{ span: 17 }"
          :labelCol="{ span: 7 }"
        >
      
          <a-form-model-item label="商品同步到聚水潭：" prop="upload_goods">
            <a-switch v-model="upload_goods" />
          </a-form-model-item>
          <a-form-model-item label="shop_id：" prop="shop_id">
            <a-input v-model="shop_id" placeholder="请输入shop_id" />
            <div class="flex-y-center">
              同步订单需要用到，绑定已有店铺或新建商家自有商城站点、跨境线下平台、线下店铺站点、B2B站点 ；<br>关于【商家自有商城】的店铺如何创建，可查看操作 http://www.erp321.com/app/support/document.html#page=1865
            </div>
          </a-form-model-item>
          <a-form-model-item label="同步订单时间：">
            {{ upload_order_time_last ? $moment(upload_order_time_last * 1000).format('YYYY-MM-DD HH:mm:ss') : '--' }}
          </a-form-model-item>
          <a-form-model-item label="聚水潭发货回调地址：">
            <a-input v-model="url_callback" :disabled="true" />
            <div class="flex-y-center">
              在聚水潭后台配置，聚水潭发货后同步到商城，可查看操作 http://www.erp321.com/app/support/document.html#page=1865
            </div>
          </a-form-model-item>
          <a-form-model-item label=" ">
            <a-button @click="submitConf" type="primary">提交信息</a-button>
          </a-form-model-item>
        </a-form-model>
      </div>
      

      <div class="tar">
        <a-dropdown>
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="importData('cat')">导入分类到聚水潭 </a-menu-item>
            <a-menu-item key="2" @click="importData('goods')">导入商品到聚水潭 </a-menu-item>
            <a-menu-item v-if="0" key="2"> --- </a-menu-item>
            <a-menu-item v-if="0" key="2" @click="importData('jst2cat')">从聚水潭导入分类 </a-menu-item>
            <a-menu-item v-if="0" key="2" @click="importData('jst2goods')">从聚水潭导入商品 </a-menu-item>
          </a-menu>
          <a-button> 导入 <a-icon type="down" /> </a-button>
        </a-dropdown>
      </div>
    </a-card>

    <GoodsPopup @onOk="goodsConfirm" ref="GoodsPopup" :checkList="checkList" isSelectOne></GoodsPopup>
  </page-header-wrapper>
</template>

<script>
import jushuitanApi from '@/api/jushuitan'

import GoodsPopup from '@/views/pt/edit/components/goods.vue'
export default {
  components: {
    GoodsPopup,
  },

  data() {
    return {
      expires_time: 0,
      checkList: [],
      isopen: 0,
      btLoading: false,
      shop_id: 0,
      upload_goods: false,
      upload_order_time_last: 0,
      url_callback: '',
    }
  },

  methods: {
    importData(type) {
      switch (type) {
        case 'cat':
          this.$confirm({
            title: '你确定导入分类嘛？',
            onOk: async () => {
              const res = await jushuitanApi.cat2Jst()
              if (res.code == 0) {
                this.$message.success(res.msg)
              }
            },
          })
          break
        case 'jst2cat':
          this.$confirm({
            title: '你确定从聚水潭导入分类？',
            onOk: async () => {
              const res = await jushuitanApi.jst2cat()
              if (res.code == 0) {
                this.$message.success(res.msg)
              }
            },
          })
          break
        case 'jst2goods':
          this.$confirm({
            title: '你确定从聚水潭导入商品？',
            onOk: async () => {
              const res = await jushuitanApi.jst2goods()
              if (res.code == 0) {
                this.$message.success(res.msg)
              }
            },
          })
          break

        default:
          this.$refs['GoodsPopup'].visible = true
          break
      }
    },

    async getData() {
      const res = await jushuitanApi.indexConf()
      if (res.code != 0) return
      this.expires_time = res.data.expires_time
      this.isopen = res.data.isopen
      this.shop_id = res.data.conf.token_info ? res.data.conf.token_info.shop_id : ''
      this.upload_goods = res.data.conf.token_info ? res.data.conf.token_info.upload_goods : false
      this.upload_order_time_last = res.data.conf.token_info ? res.data.conf.token_info.upload_order_time_last : 0
      this.url_callback = res.data.conf.url_callback
      console.log(this.expires_time)
    },
    async goodsConfirm(e) {
      this.checkList = e
      const res = await jushuitanApi.goods2Jst({
        goods_id: e[0].id,
      })
      if (code != 0) return
      this.$message.success(res.msg)
    },
    async clickLink() {
      this.btLoading = true
      const res = await jushuitanApi.createUrl()
      this.btLoading = false
      window.open(res.data)
    },

    async submitConf() {

      const res = await jushuitanApi.saveConfStore({
        conf: {
          shop_id: this.shop_id,
          upload_goods: this.upload_goods,
        },
      })
      if (res.code != 0) return
      this.$message.success(res.msg)
      this.getData()
    },
  },

  mounted() {
    this.getData()
  },
}
</script>

<style lang="less" scoped>
.title {
  color: #000;
  font-size: 16px;
  margin-bottom: 10px;
  white-space: nowrap;
}
.tip {
  font-size: 14px;
  color: #8c8c8c;
  display: block;
}
</style>
